<template>
  <div v-if="item!=null" class="marBom60 questionLi scroll_883283837">
    <h3 class="mark_name colorDeep">{{item.id}}.
      {{ item.question }}
    </h3>
    <ul class="mark_letter colorDeep">

      <li>{{ item.choose1 }}</li>
      <li>{{ item.choose2 }}</li>
      <li>{{ item.choose3 }}</li>
      <li>{{ item.choose4 }}</li>

    </ul>

    <div class="mark_answer">
      <div class="mark_key clearfix">
        <span class="colorGreen marginRight40 fl"><i class="fontWeight">{{ item.answer }}</i> </span>
      </div>

      <div class="analysisDiv">
                <div class="analysis">
                    <p>{{item.analysis}}</p></div>
            </div>

    </div>
  </div>
</template>

<script>
module.exports = {
  name: "informationBox",
  props: {
    item: Object,
    index: Number
  }
}
</script>

<style scoped>


.marBom60 {
  margin-bottom: 60px;
}

.mark_fill_matching.colorGreen dd .letter {
  color: #00B86E;
}

.colorGreen {
  color: #00B86E;
}

.questionLi img {
  max-width: 100%
}

.mark_name {
  line-height: 20px;
  margin: 0 20px;
  font-size: 14px;
  overflow-wrap: break-word
}

.mark_name .numLine {
  border-bottom: solid #181E33 1px;
  padding: 0 10px;
}

.mark_fill_matching.colorDeep dd .letter {
  color: #181E33;
}

.mark_fill_matching.colorGreen dd .letter {
  color: #00B86E;
}

.mark_letter {
  line-height: 20px;
  margin: 0 20px;
}

.mark_letter li {
  margin-top: 16px;
}

.mark_read .mark_letter, .mark_read .mark_answer_key, .mark_read .mark_gestalt {
  padding-bottom: 0;
}

.mark_answer {
  min-height: 20px;
  line-height: 20px;
  padding: 16px 20px;
  margin-top: 16px;
  border: solid #F0F3F7 1px;
  border-left: 5px solid #e1e7f0;
  position: relative;
  margin-left: 20px;
}

.mark_key {
  padding-right: 212px;
}

.marginRight40 {
  margin-right: 40px;
}

.fontWeight {
  font-weight: 600;
}
</style>
